<template>
    <div class="edit_page">
        <div class="cell">
            <div class="cell_item">
                <span>名称</span>
                <div class="value">
                    <input type="text" v-model="form.codeName" placeholder="请输入名称" placeholder-class="placeholder">
                </div>
            </div>
            <div class="cell_item">
                <span>行业</span>
                <div class="value">
                    <picker mode="selector" :range="contentTypeList" range-key="label" @change="typeChange">
                        <div class="more flex-v-center">
                            <span :class="{placeholder: !form.contentType}">{{form.contentType || '请选择'}}</span>
                            <i class="fs20 color-999 mar-l10 icon-arrow-bottom-triangle-solid"></i>
                        </div>
                    </picker>
                </div>
            </div>
            <div class="cell_item">
                <span>标题</span>
                <div class="value">
                    <input type="text" v-model="form.codeTitle" placeholder="请输入标题" placeholder-class="placeholder">
                </div>
            </div>
            <div class="cell_item">
                <span>AI关键词</span>
                <div class="value">
                    <textarea v-model="form.aiKey" placeholder="AI关键词" placeholder-class="placeholder"></textarea>
                </div>
            </div>
            <div class="cell_item">
                <span>随机标签</span>
                <div class="value">
                    <textarea v-model="form.randLabel" placeholder="随机标签，用#分割" placeholder-class="placeholder"></textarea>
                </div>
            </div>
            <div class="cell_item">
                <span>固定标签</span>
                <div class="value">
                    <textarea v-model="form.fixLabel" placeholder="固定标签，用#分割" placeholder-class="placeholder"></textarea>
                </div>
            </div>
            <div class="cell_item">
                <span>图片数量</span>
                <div class="value">
                    <input type="text" v-model="form.imgCnt" placeholder="图片数量" placeholder-class="placeholder">
                </div>
            </div>
            <div class="cell_item">
                <span>文章字数</span>
                <div class="value">
                    <input type="text" v-model="form.textCnt" placeholder="文章字数" placeholder-class="placeholder">
                </div>
            </div>
            <div class="cell_item">
                <span>封面图片</span>
                <div class="value flex-v-center">
                    <div class="pad-tb20">
                        <pub-upload-img v-model="form.coverImg"></pub-upload-img>
                    </div>
                    <span class="mar-l30 link fs26 flex color-main" @click="selectFromMaterial('open')">
                        从图库选择
                        <i class="fs24 icon-arrow-right"></i>
                    </span>
                </div>
            </div>
            <!-- <div class="cell_item">
                <span>省市区</span>
                <div class="value">
                    <pub-area-picker @change="areaPickerChange">
                        <div class="city_name flex">
                            <p class="flex-1" :class="{placeholder: !form.codeCity}">{{form.codeCity ? form.codeProvince + '-' + form.codeCity + '-' + form.codeDistict : '请选择地区'}}</p>
                            <i class="fs20 color-999 icon-arrow-right"></i>
                        </div>
                    </pub-area-picker>
                </div>
            </div> -->
            <div class="cell_item">
                <span>地址</span>
                <div class="value">
                    <textarea v-model="form.codeAddress" placeholder="详细地址" placeholder-class="placeholder"></textarea>
                </div>
            </div>
        </div>
        <div class="submit" @click="submit">保存</div>
    </div>
</template>

<script>
import { editUserShareCode, getUserShareCode } from '@/request/house'
export default {
    name: "",
    components: {},
    data() {
        return {
            codeId: '',
            contentTypeList: [
                { label: '民宿', value: '民宿' },
                { label: '餐饮', value: '餐饮' },
                { label: '酒店', value: '酒店' },
            ],
            form: {
                codeName: '',   //名称	
                codeTitle: '',   //标题	

                aiKey: '',   //ai关键字	
                codeProvince: '',   //省	
                codeCity: '',   //市	
                codeDistict: '',   //区	
                codeAddress: '',   //地址	

                codeLat: '',   //经纬	
                codeLon: '',   //经纬	

                contentType: '',   //文体类型	
                randLabel: '',   //随机标签#分割
                fixLabel: '',   //固定标签#分割
                coverImg: '',   //封面图片	
                
                imgCnt: '',   //图片数量
                textCnt: '' //文本数字	
            }
        }
    },
    onLoad({ id }) {
        this.codeId = id
        if(this.codeId) {
            this.getCodeDetail()
        }
    },
    methods: {
        getCodeDetail() {
            getUserShareCode({
                id: this.codeId,
            }).then(res => {
                let data = res.data.list[0]
                this.form.codeName = data.codeName   //名称	
                this.form.codeTitle = data.codeTitle   //标题	
                this.form.aiKey = data.aiKey   //ai关键字	
                this.form.codeProvince = data.codeProvince   //省	
                this.form.codeCity = data.codeCity   //市	
                this.form.codeDistict = data.codeDistict   //区	
                this.form.codeAddress = data.codeAddress   //地址	
                this.form.codeLat = data.codeLat   //经纬	
                this.form.codeLon = data.codeLon   //经纬	
                this.form.contentType = data.contentType   //文体类型	
                this.form.randLabel = data.randLabel   //随机标签#分割
                this.form.fixLabel = data.fixLabel   //固定标签#分割
                this.form.coverImg = data.coverImg   //封面图片	
                this.form.imgCnt = data.imgCnt   //图片数量
                this.form.textCnt = data.textCnt//文本数字	

            })

        },
        selectFromMaterial(e) {
            if(e == 'open') {
                this.$navigate.to('/pages/admin/house/imgMaterial?isSelect=1&limit=1')
            } else {
                if(Array.isArray(e)) {
                    this.form.coverImg = e[0].fileUrl
                }
            }
        },
        areaPickerChange(e) {
            console.log(e);
            this.form.codeProvince = e.province
            this.form.codeCity = e.city
            this.form.codeDistict = e.area
        },
        typeChange(e) {
            this.form.contentType = this.contentTypeList[e.target.value].value
        },
        submit() {
            console.log(this.form);
            editUserShareCode({
                ...this.form,
                id: this.codeId || void 0
            }).then(res => {
                this.$interact.modal(res.msg).then(action => {
                    this.$navigate.back()
                    if(this.$prePage()) this.$prePage().onRefresh();
                })
            })
        }
    }
}
</script>
<style lang="less" scoped>
@import "~@/styles/cell.less";
.edit_page{
    padding-bottom: 50rpx;
}

.submit{
    width: 690rpx;
    height: 90rpx;
    background: @mainColor;
    margin: 60rpx auto;
    .align(center);
    color: #fff;
    font-size: 34rpx;
    font-weight: bold;
    border-radius: 10rpx;
}

</style>